<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Login</title>
    <!-- Animate.css -->
    <link rel="stylesheet" href="__PUBLIC__/home/css/animate.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="__PUBLIC__/home/css/bootstrap.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="__PUBLIC__/home/css/style.css">

    <!-- Modernizr JS -->
    <script src="__PUBLIC__/home/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<header id="gtco-header" class="gtco-cover" role="banner"
        style="background-image: url('__PUBLIC__/home/imeags/img_4.jpg')">
    <div class="overlay"></div>
    <div class="gtco-container">
        <div class="row">
            <div class="col-md-12 col-md-offset-0 text-left">
                <div class="row row-mt-15em">
                    <div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
                        <span class="intro-text-small">Welcome to Love shop</span>
                        <h1>爱上商城.爱生活.爱你</h1>
                    </div>
                    <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
                        <div class="form-wrap">
                            <div class="tab">
                                <ul class="tab-menu">
                                    <li class="active gtco-first"><a href="#" data-tab="signup">注册</a></li>
                                    <li class="gtco-second"><a href="#" data-tab="login">登录</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-content-inner active" data-content="signup">
                                        <form id="add" action=" " method="post">
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label>用户名或邮箱</label>
                                                    <input type="text" class="form-control" name="username"><span
                                                        id="checkAddUser"></span>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label>密码</label>
                                                    <input type="password" class="form-control" name="password"><span
                                                        id="checkAddPwd"></span>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <label>确认密码</label>
                                                    <input type="password" class="form-control" name="confirm_password"><span
                                                        id="checkAddPwd2"></span>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <input type="submit" class="btn btn-primary" id="checkUser"
                                                           value="注册">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-content-inner" data-content="login">
                                        <form id="login" action=" " method="post">
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    用户名或邮箱
                                                    <input type="text" class="form-control" name="username"
                                                           id="username">
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    密码
                                                    <input type="password" class="form-control" name="password"
                                                           id="password">
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <input type="submit" class="btn btn-primary" value="登录">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<script src="__PUBLIC__/home/js/jquery.min.js"></script>
<script src="__PUBLIC__/home/js/jquery-1.11.0.min.js"></script>
<!-- Waypoints -->
<script src="__PUBLIC__/home/js/jquery.waypoints.min.js"></script>
<!-- Main -->
<script src="__PUBLIC__/home/js/login.js"></script>
<script>
    $(function () {
        var data = {};
        // =================================注册相关===============================
        // @TODO 验证用户名
        $('input[name="username"]').blur(function () {
            data.username = $(this).val();
            if (data.username == '' || data.username == null) {
                $('#checkAddUser').html('<font color="red">用户名不能为空</font>')
                return false;
            }
            $.post("{:U('Login/checkAddUser')}", data, function (ret) {
                if (ret.code == 0) {
                    $('#checkAddUser').html('<font color="red">该用户名已经存在啦！</font>');
                    return false;
                }
                $('#checkAddUser').html('<font color="green">该用户名可以用哦！</font>');
            })
        });
        // @TODO 验证密码
        $('input[name="password"]').blur(function () {
            data.password = $(this).val();
            if (data.password.length < 6 || data.password.length == 16) {
                $('#checkAddPwd').html('<font color="red">密码长度不能低于6，不能超出16</font>')
                return false;
            }
            $('#checkAddPwd').html('<font color="green">这长度还说的过去！</font>');
        });
        // @TODO 验证确认密码
        $('input[name="confirm_password"]').blur(function () {
            data.password = $('input[name="password"]').val();
            data.confirm_password = $(this).val();
            if (data.confirm_password == '') {
                return false;
            }
            if (data.password !== data.confirm_password) {
                $('#checkAddPwd2').html('<font style="display: block" color="red">密码不一致</font>')
                return false;
            }
            $('#checkAddPwd2').html('<font color="green">刚刚好！</font>');
        });
        // @TODO 验证注册
        $('#checkUser').click(function () {

            if (data.username == '' || data.username == null) {
                return false;
            }
            if (data.password.length < 6 || data.password.length == 16) {
                return false;
            }
            if (data.password !== data.confirm_password) {
                return false;
            }
            $.post("{:U('Login/addLogin')}", data, function (ret) {
                if (ret.code == 1) {
                    alert('恭喜你！注册成功啦！');
                    history.go(0);
                } else {
                    alert('很抱歉！请您仔细检查您的信息！');
                }
            });
            return false;
        });
        // ==============================================end=================================
        // @TODO 验证登陆
        $('#login').submit(function () {
            var data = {};
            data.username = $('#username').val();
            data.password = $('#password').val();
            $.post("{:U('Login/checkLogin')}", data, function (ret) {
                if (ret.code == 1) {
                    alert('很抱歉！您的用户名或密码错误！');
                    return false;
                }
                    window.location.href = "{:U('Personal/personal')}";
                    alert('登录成功');
            });
            return false;
        })

    });
</script>
</body>
</html>

